<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Mesto</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="pages/index.css">
    </head>
    <body class="body">
        <header class="header">
            <img class="logo" src="images/logo.svg" alt="Логотип сайта">
        </header>
        <main class="content">
            <section class="profile">
                <div class="profile__wrapper">
                    <img class="profile__avatar" src="images/avatar.png" alt="Аватар профиля"> 
                    <div class="profile__info">
                        <div class="profile__name-btn-wrapper">
                            <h1 class="profile__name">Жак-Ив Кусто</h1>
                            <button class="profile__edit-button" type="button"></button>
                        </div>
                        <p class="profile__description">Исследователь океана</p>
                    </div>
                </div>
                <button class="profile__add-button" type="button"></button>
            </section>
            <section class="elements">
                
            </section>
        </main>
        <footer class="footer">
            <p class="footer__author">© 2023 Даниил</p>
        </footer>
        <div class="popup popup_edit">
            <div class="popup__container">
                <h2 class="popup__name">Редактировать профиль</h2>
                <form class="popup__form popup__form_edit" name="popup-form" novalidate>
                    <input id="input-name" class="popup__input popup__input_type_name" type="text" name="input-name" required minlength="2" maxlength="40">
                    <span class="input-name-error popup__input-error"></span>
                    <input id="input-description" class="popup__input popup__input_type_description" type="text" name="input-description" required minlength="2" maxlength="200">
                    <span class="input-description-error popup__input-error"></span>
                    <button class="popup__submit" type="submit" name="input-submit">Сохранить</button>
                </form>
                <button class="popup__close-btn" type="button"></button>
            </div>
        </div>
        <div class="popup popup_place">
            <div class="popup__container">
                <h2 class="popup__name">Новое место</h2>
                <form class="popup__form popup__form_place" name="popup-form" novalidate>
                    <input id="input-place" class="popup__input popup__input_type_place" type="text" name="input-place" placeholder="Название" required minlength="2" maxlength="30">
                    <span class="input-place-error popup__input-error"></span>
                    <input id="input-link" class="popup__input popup__input_type_link" type="url" name="input-link" placeholder="Ссылка на картинку" required>
                    <span class="input-link-error popup__input-error"></span>
                    <button class="popup__submit" type="submit" name="input-submit">Создать</button>
                </form>
                <button class="popup__close-btn" type="button"></button>
            </div>
        </div>

        <div class="popup popup_crop">
            <div class="popup__container">
                <img class="popup__image" src="#" alt="Изображение в отдельном окне">
                <p class="popup__des"></p>
                <button class="popup__close-btn" type="button"></button>
            </div>
        </div>    

        <template id="element">
            <div class="element">
                <img class="element__image" src="images/karach.png" alt="Изображения Карачаевска">
                <div class="element__heading">
                    <h2 class="element__name">Карачаевск</h2>
                    <button class="element__like" type="button"></button>
                </div>
                <button class="element__trash" type="button"></button>
            </div>
        </template>
        <script type="module" src="scripts/index.js"></script>
    </body>
</html>